<template>
  <div class="app-container">
    <!-- 交付信息 -->
    <informationJf ref="informationJf" v-model="form" state='write' />
    <!-- 车辆信息 -->
    <carInformationJf ref="carInformationJf" v-model="form" state='write' />
    <div style="text-align: right;box-sizing: border-box;padding-right: 20px;margin-top: 20px; background-color: #fff;width: 100%;height: 60px;line-height: 60px;border-radius: 8px;">
      <el-button @click="back">返回</el-button>
      <el-button type="primary" @click="submit">提交</el-button>
    </div>
  </div>
</template>

<script>
import informationJf from "./components/informationJf"
import carInformationJf from "./components/carInformationJf"
import customerInformation from "./components/customerInformation"
import { backCarResult } from "@/api/pickUpTheCar";
export default {
  // 新增委外收车申请
  name: 'SubmitResults',
  components: {
    informationJf,
    carInformationJf,
    customerInformation
  },
  data() {
    return {
      form: { receivingInfo: 1, carList: [] }
    };
  },
  created() {

  },
  methods: {
    async submit() {
      let result = await this.valid();
      if (result) {
        const loading = this.$loading({
          lock: true,
          text: "提交中",
          spinner: "el-icon-loading",
          background: "rgba(0, 0, 0, 0.7)",
        });
        let data = {
          ...this.form,
          numberOfVehicles: this.form.carList.length,
          totalFee: this.$refs?.carInformationJf.totalPrice,
          backCarId: this.$route.query.backCarId,
          supplierName: this.$route.query.supplierName,
          supplierId: this.$route.query.supplierId,

        }
        backCarResult(data).then(() => {
          loading.close();
          this.$message.success("提交成功");
          this.back()
        }).catch(() => {
          loading.close();
        });
      } else {
        this.error();
      }
    },
    back() {
      this.$tab.closeOpenPage(this.$route);
      this._toPage({
        name: "PickUpTheCarList",
      });
    },
    error() {
      this.$nextTick(() => {
        const el = document.querySelectorAll(".el-form-item__error")[0];
        el.scrollIntoView({ block: "center", behavior: "smooth" });
      });
    },
    valid() {
      return new Promise(async (resolve) => {
        let result = true;
        let refs = Object.values(this.$refs);
        for (let index = 0; index < refs?.length; index++) {
          const ref = refs[index];
          if (Object.prototype.toString.call(ref) == "[object Array]") {
            for (let i = 0; i < ref.length; i++) {
              const element = ref[i];
              if (element?.valid) {
                let rc = await element?.valid?.();
                result = result && rc;
              }
              if (element?.validate) {
                let rf = await this._valid(ref);
                result = result && rf;
              }
              if (element?.form_validate) {
                let rf = await this._valid(ref, "form_validate");
                result = result && rf;
              }
            }
          } else {
            if (ref?.valid) {
              let rc = await ref?.valid?.();
              result = result && rc;
            }
            if (ref?.validate) {
              let rf = await this._valid(ref);
              result = result && rf;
            }
            if (ref?.form_validate) {
              let rf = await this._valid(ref, "form_validate");
              result = result && rf;
            }
          }
        }
        resolve(result);
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.app-container {
  overflow: auto !important;
}
</style>
